<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :md="6" :lg="4">
            <el-form-item label="序号" prop="ID">
              <el-input v-model="form.ID" placeholder="请输入序号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label="监控对象类型" prop="KEYTYPE">
              <el-select v-model="form.KEYTYPE" filterable clearable placeholder="请选择监控对象类型" @change="changeType">
                <el-option v-for="item in STATICOBJECTLIST" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="监控key名称" prop="KEYNAME">
              <el-input v-model="form.KEYNAME" placeholder="请输入监控key名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="受理渠道" prop="BUSICHANNEL">
              <el-select v-model="form.BUSICHANNEL" filterable clearable placeholder="请选择受理渠道">
                <el-option v-for="item in channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                  :value="item.FIELDKEY"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="业务类型" prop="BUSITYPE">
              <el-select v-model="form.BUSITYPE" filterable :disabled="form.KEYTYPE == 'agent'" clearable placeholder="请选择业务类型">
                <el-option v-for="item in typeOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                  :value="item.FIELDKEY"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="queryModel(1)">查询
            </el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini" @click="addlocalCard" icon="el-icon-plus">新增</el-button>
        </el-col>
        <el-col :lg='2' :md='3' v-if="btnPermission('Button_DevInfo_Edit')">
          <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='DialogShow'>修改</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del" :disabled="currentRow.length!=1">删除
          </el-button>
        </el-col>

      </el-row>
      <el-table :data="tableData" ref="table" border class="tableMarginTop" highlight-current-row
        @selection-change="handleCurrentChange" header-row-class-name="tableHeaderClass" style="min-height:390px;">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="ID" label="序号" align="center"></el-table-column>
        <el-table-column prop="KEYNAME" label="监控KEY名称" width="140"></el-table-column>
        <el-table-column prop="KEYTYPE" label="监控对象类型" align="center" width="120" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="KEYLEVEL" label="渠道类型" align="center" width="180" :formatter="dataFormat">
        </el-table-column>
        <el-table-column prop="BUSICHANNEL" label="受理渠道" width="90">
          <template slot-scope="scope">
            <div>
              {{scope.row.BUSICHANNEL | channelFormat}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="BUSITYPE" label="业务类型" align="center">
          <template slot-scope="scope">
            <div>
              {{scope.row.BUSITYPE | typeFormat}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="MEDIATYPE" label="多媒体类型" width="100" align="center">
          <template slot-scope="scope">
            <div>
              {{scope.row.MEDIATYPE | mediaFormat}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="STATUS" label="状态" align="center">
          <template slot-scope="scope">
            <div>
              {{scope.row.STATUS | statusFormat}}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="UPDATETIME" label="更新时间" width="100"></el-table-column> -->
        <el-table-column prop="REMARK" label="备注" width="320px"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
          :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
          :total="totalRcrdNum" @current-change="changePage"></el-pagination>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addaddlocalCardDialog" :option="dialogOptions" @refreshTable="queryModel(1)">
      </component>
    </keep-alive>
  </div>
</template>

<script>
  import toolBox from "@/common/utils/toolBox";
  import addaddlocalCardDialog from "./dialog/addDialog";
  import requestYg from "@/common/utils/requestYg";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import query from "@/message/paramManagement/monitorKey/queryMonitorKey";
  import dataQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
  import request from "@/common/utils/requestWFM";
  let that 
  export default {
    name: "",
    beforeCreate: function () {
      that = this;
    },
    filters: {
      typeFormat: (val) => {
        // console.log(that.dataOptions)
        let str = ''
        that.typeOption.forEach(item => {
          if (val == item.FIELDKEY) {
            str = item.FIELDVALUE
          }
        });
        return str
      },
      mediaFormat: (val) => {
        // console.log(that.dataOptions)
        let str = ''
        that.mediaOption.forEach(item => {
          if (val == item.value) {
            str = item.label
          }
        });
        return str
      },
      channelFormat:(val) => {
        // console.log(that.dataOptions)
        let str = ''
        that.channelOption.forEach(item => {
          if (val == item.FIELDKEY) {
            str = item.FIELDVALUE
          }
        });
        return str
      },
      statusFormat:(val) => {
        // console.log(that.dataOptions)
        let str = ''
        that.STATUSLIST.forEach(item => {
          if (val == item.value) {
            str = item.name
          }
        });
        return str
      },
    },
    data() {
      return {
        STATICOBJECTLIST: [{
            name: "坐席",
            value: "agent"
          },
          {
            name: "队列",
            value: "queue"
          },
        ],
        STATUSLIST: [{
            name: "无效",
            value: "0"
          },
          {
            name: "有效",
            value: "1"
          },
        ],
        PARAMLEVELList: {
          "1": "多媒体渠道",
          "2": "多媒体渠道+受理渠道",
          "3": "多媒体渠道+受理渠道+业务类型",
          "4": "全渠道",
        },
        mediaOption:[
          {value:'video',label:'视频'},
          {value:'voice',label:'电话'},
          {value:'chat',label:'文字'},
          {value:'all',label:'全渠道'}
        ],
        pageSize: undefined, //表格每页的条数
        form: {
          ID: "",
          KEYTYPE: "",
          KEYNAME: "",
          BUSICHANNEL: '',
          BUSITYPE: "",
        },
        channelOption: [], //受理渠道
        typeOption: [], //业务类型
        currentRow: [], //表格当前选中行
        currentPage: 1, //表格当前页
        totalRcrdNum: 0,
        tableData: [], //表格 数据
        loading: false, //loading遮罩
        total: 0, //表格总条数
        checkedUser: false, //控制按钮是否可用
        isDisabledDel: false,
        dialogList: {
          //指定被渲染组件列表
          addaddlocalCardDialog,
        },
        dialogOptions: {
          //新增
          isShow: false
        },
        type: getGlobalParams.get("PARAMTYPE"),
      };
    },
    computed: {},
    mounted() {
      this.BUSICHANNELQuery()
      this.BUSITYPEQuery()
    },
    created: function () {
      this.pageSize = getGlobalParams.get("PageSize");
      this.queryModel(1);
    },
    watch: {},
    methods: {
      changeType(){
        this.form.BUSITYPE = ''
      },
      async BUSICHANNELQuery() {
        let resBody = new dataQuery();
        resBody.data.FIELDCODE = 'BUSICHANNEL'
        // resBody.data.FIELDNAME = this.form.name;
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.channelOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      async BUSITYPEQuery() {
        let resBody = new dataQuery();
        resBody.data.FIELDCODE = 'BUSITYPE'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.typeOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      async queryModel(num) {
        let resBody = new query();
        this.currentPage = num;
        resBody.data.ID = this.form.ID;
        resBody.data.KEYNAME = this.form.KEYNAME;
        resBody.data.KEYTYPE = this.form.KEYTYPE;
        resBody.data.BUSICHANNEL = this.form.BUSICHANNEL;
        resBody.data.BUSITYPE = this.form.BUSITYPE;
        resBody.data.PAGEFLAG = 4;
        resBody.data.PAGEROWNUM = this.pageSize;
        resBody.data.CURRPAGE = num;
        requestYg(resBody)
          .then(response => {
            this.totalRcrdNum = response.RSP_BODY.TOTALROWNUM ?
              response.RSP_BODY.TOTALROWNUM :
              0;
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.tableData = response.RSP_BODY.struct || [];
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },
      del() { //删除弹出
        this.$confirm("该条因子参数将被删除, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.paramDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        this.limstr = "";
      },
      paramDel() { //删除交易限额
        this.loading = true;
        let resBody = new query();
        resBody.data.ID = this.currentRow[0].ID;
        resBody.data.OPERFLAG = 'D'
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.$message({
                type: "success",
                message: "监控KEY删除成功!"
              });
              this.queryModel(1);
            } else {
              this.loading = false;
              this.$message({
                type: "success",
                message: "监控KEY删除失败!"
              });
            }
          })
          .catch(error => {
            this.loading = false;
          });
      },

      dataFormat(row, column) {
        //格式化表格
        if (column.property == "KEYTYPE")
          return this.type[row[column.property]];
         // 监控因子等级
        if (column.property == "KEYLEVEL")
          return this.PARAMLEVELList[row[column.property]];
      },
      addlocalCard() {
        //添加
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = false;
        this.dialogOptions.title = "监控KEY新增";
        this.dialogOptions.STATICOBJECTLIST = this.STATICOBJECTLIST;
        this.dialogOptions.channelOption = this.channelOption;
        // this.dialogOptions.mediaOption = this.mediaOption;
        this.dialogOptions.STATUSLIST = this.STATUSLIST;
        this.dialogOptions.typeOption = this.typeOption;
        this.dialogOptions.log = "1"; //添加
      },
      DialogShow() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.title = "监控KEY修改";
        this.dialogOptions.STATICOBJECTLIST = this.STATICOBJECTLIST;
        this.dialogOptions.STATUSLIST = this.STATUSLIST;
        // this.dialogOptions.mediaOption = this.mediaOption;
        this.dialogOptions.channelOption = this.channelOption;
        this.dialogOptions.typeOption = this.typeOption;
        this.dialogOptions.log = "2"; //修改
      },
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      changePage(val) {
        this.currentPage = val;
        this.queryModel(val);
      },
      refreshTable() {
        //刷新数据并清除选中的数据
        // this.businesstypeList();
      },
      handleCurrentChange(val) {
        //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
        this.currentRow = val;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryModel(1);
      }
    }
  };

</script>


<style lang="scss" scoped>
  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
